<template>
  <div class="page-container">
    <div class="img">
      <img :src="config[type].img" />
    </div>
    <div class="content">
      <h1>{{config[type].title}}</h1>
      <div class="desc">{{config[type].desc}}</div>
      <div class="action">
        <el-button type="primary" @click="backHome">返回首页</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import Config from './typeConfig'

export default defineComponent({
    name: 'PageError',
    emits: ['backHome'],
    props: {
      type : {
         type: Number,
         require: true
      },
      homeRoute : {
         type: String,
         default: '/'
      }
    },
    setup(props, { emit }) {
      const router = useRouter()
      const store = useStore()

      const state = reactive({
        config: Config,
      })
      const methods = reactive({
        backHome: ()=> {
          if (props.homeRoute && store.getters.token) {
            router.push(props.homeRoute)
          } else{
            router.push('/login')
          }
          emit('backHome', props.type)
        }
      })
      return {
        ...toRefs(state),
        ...toRefs(methods)
      }
    }
});
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  .img{
    padding-right: 52px;
    zoom: 1;
    img{
      max-width: 430px;
    }
  }
  .content{
    h1{
      color: #434e59;
      font-size: 72px;
      font-weight: 600;
      line-height: 72px;
      margin-bottom: 24px;
    }
    .desc{
      color: fade(#000, 45%);
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 16px;
    }
  }
}
</style>
